<template>
	<view>
		<!-- 我的客服新样式 -->
		<view class="wodekefu">
			<view style="padding-bottom: 300rpx;">
				<view class="kefu-top">
					<view class="title">Hi~，我有什么可以帮您的</view>
					<view class="desc">采招客服竭诚为您服务！</view>
				</view>
				<view class="kefu-middle">
					<view class="desc2">
						您可以通过下方<text>电话客服</text>或是<text>在线客服</text>联系到我们， 我们可以为您
					</view>
					<u-cell-group>
						<u-cell  :title="item.content"  v-for="(item,index) in fuwuList" :key="index"></u-cell>
					</u-cell-group>
					<view class="fwdh">
						您有任何网站相关的问题都可以联系我们<br/>服务电话：<text @click="makePhone">{{serverTel}}</text>
					</view>
				</view>
			</view>
			
			<view class="kefu-bottom">
				<view @click="makePhone">
					<image src="@/static/img/dianhuakefu.png" mode="widthFix"></image>电话客服
				</view>
				<view @click="zaixianzixun">
					<image src="@/static/img/zaixianzixun.png" mode="widthFix"></image>在线咨询
				</view>
			</view>
		</view>
		
		<!-- 我的客服原有样式 -->
		<!-- <view class="service">
			<image src="../../../static/img/service.jpg" class="service-adv"></image>
			<view class="service-line">服务热线：{{serverTel}}</view>
			<view class="lxkf" @click="yunyingshang">联系客服</view> -->
			<!-- <view class="uni-panel" v-for="item in lists" :key="item.url">
				<view class="uni-panel-h" @click="goDetailPage(item.url)">
					<text class="uni-panel-text">{{item.name}}</text>
					<text class="uni-panel-icon uni-icon">&#xe583;</text>
				</view>
			</view> -->
		<!-- </view> -->
	</view>
</template>

<script>
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	import uLink from "@/components/uLink.vue"
	export default {
		components: {
			uniList,
			uniListItem,
			uLink
		},
		data() {
			return {
				serverTel: this.baseConfig.serverTel,
				lists: [{
						name: "如何开启或关闭新消息提醒",
						url: "xiaoxitixing"
					},
					{
						name: "如何定制专属项目信息",
						url: ""
					}
				],
				fuwuList:[
					{content:'1.介绍采招网的会员服务；'},
					{content:'2.获取购买会员的优惠；'},
					{content:'3.了解行业的动态；'},
					{content:'4.代购标书；'},
					{content:'5.了解招投标相关课程；'},
					{content:'6.招投标信息确认；'},
					{content:'7.讲解采招实用新功能。'},
				],
				isLogin:false,
			}
		},
		onShow() {
			this.getData();
			this.isLogin = this.currUser.islogin;
		},
		methods: {
			yunyingshang() {
				uni.makePhoneCall({
					phoneNumber: this.serverTel
				})
			},
			goDetailPage(path) {
				if (this.navigateFlag) {
					return;
				}
				this.navigateFlag = true;
				uni.navigateTo({
					url: '/pages/user/service/' + path + '/' + path
				});
				setTimeout(() => {
					this.navigateFlag = false;
				}, 200)
			},
			doLogin() {
				uni.navigateTo({
					url: '/pages/user/login/login1'
				})
			},
			getData() {
				//异步请求数据
				let data = this.initNewData();
				data.from = 4038;
				data.location = 8091;
				uni.request({
					url: this.baseConfig.serverURL + 'User/wodekefu/KeFuHandler.ashx', //检查更新的服务器地址
					data: data,
					method: "POST",
					header: {
						"content-type": "application/x-www-form-urlencoded" //"application/json"
					},
					success: (res) => {
						if (res.statusCode == 200) {
							if (res.data.ret) {
								//获取成功，绑定
								let tel = res.data.other;
								if (tel != undefined && tel != '') {
									this.serverTel = tel;
								}
							}
						} else {
							// uni.showToast({
							// 	title: '获取失败',
							// 	icon: "none"
							// });
						}
					},
					fail: (res) => {
						// uni.showToast({
						// 	title: '获取失败，可能已超时！',
						// 	icon: "none"
						// });
					}
				})

			},
			//打电话
			makePhone(){
				uni.makePhoneCall({
					phoneNumber: this.serverTel //仅为示例
				});
			},
			//在线咨询--拉起小程序添加客服页面---需要传from和token
			zaixianzixun(){
				// 先验证是否登录-未登录进行登录,登陆完才会有token
				if (!this.isLogin) {
					this.doLogin()
				} else {
					let data = this.initNewData();
					data.from = 4038;
					const path = "pagesOne/kefujingli/addkefu?from="+data.from +'&token='+data.token
					// console.log(path)
					//#ifdef APP-PLUS
					plus.share.getServices(res => {
						console.log(res)
						let sweixin = null;
						sweixin = res.find(i => i.id === 'weixin')
						
						uni.showToast({
							title: sweixin ? '自动跳转到微信添加客服' : '微信未安装',
							icon: 'none'
						})
						console.log(sweixin)
					
						if (sweixin) {
							// 分享跳转到微信小程序
							sweixin.launchMiniProgram({
								id: "gh_cd40829a4ca1", //微信小程序原生id
								path: path, //    打开小程序的页面路径，不传默认跳转首页
								type: 0 //     微信小程序版本类型，可取值： 0-正式版； 1-测试版； 2-体验版。 默认值为0。
							})
						} else {
							uni.showToast({
								title: '请安装微信',
								icon: 'none'
							})
						}
					}, err => {
						console.log("分享失败"); // 获取分享服务列表失败
					});
					//#endif
				}
			},
		}
	}
</script>

<style lang="scss">
	@import '../../../common/uni-nvue.css';

	page {
		// background-color: #f3f3f3;
	}

	.service {
		background-color: #fff;
		margin-top: 20rpx;
		padding-top: 40rpx;
		padding-bottom: 40rpx;
	}

	.service-adv {
		width: 414rpx;
		height: 176rpx;
		display: block;
		margin: 0 auto;
	}

	.service-line {
		text-align: center;
		font-size: 34rpx;
		margin: 30rpx 0;
	}

	.lxkf {
		background-color: #2e9cfb;
		height: 70rpx;
		width: 80%;
		color: #fff;
		font-size: 34rpx;
		border-radius: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto 30rpx;
	}

	.uni-panel {
		border-bottom: 1px solid #e8e8e8;
		margin: 0 30rpx;

		.uni-panel-h {
			display: flex;
		}

		.uni-panel-icon {
			font-size: 18px;
		}
	}
	//新样式
	.wodekefu{
		.kefu-top{
			padding: 72rpx 32rpx 176rpx;
			background: url(@/static/img/kefu-bg.png) center no-repeat;
			background-size: 100% 100%;
			.title{
				font-size: 32rpx;
				color: #011A67;
				font-weight: bold;
			}
			.desc{
				margin-top: 18rpx;
				font-size: 24rpx;
				color: #011A67;
			}
		}
		.kefu-middle{
			padding: 0 32rpx;
			margin-top: -80rpx;
			.desc2{
				font-weight: bold;
				font-size: 30rpx;
				color: #002764;
				line-height: 42rpx;
				text{
					color: #FF6A07;
				}
			}
			::v-deep.u-cell__body{
				padding: 20rpx 0;
				font-size: 28rpx;
				color: #333;
				
			}
			.u-cell-group{
				margin-top: 24rpx;
			}
			::v-deep.u-cell{
				.u-line{
					display: block ;
				}
			}
			::v-deep.u-line{
				display: none;
				border-color: #eee !important;
			}
			.fwdh{
				margin-top: 36rpx;
				font-size: 28rpx;
				color: #333333;
				line-height: 48rpx;
				text{
					color: #FF6A07;
				}
			}
		}
		.kefu-bottom{
			width: 100%;
			display: flex;
			justify-content:space-between;
			align-items: center;
			padding: 0 20rpx;
			position: fixed;
			bottom:26rpx;
			left: 0;
			box-sizing: border-box;
			view{
				width: 340rpx;
				height: 120rpx;
				display: flex;
				justify-content:center;
				align-items: center;
				font-weight:bold;
				font-size: 36rpx;
				color: #FFFFFF;
				&:first-child{
					background: linear-gradient(0deg, #FE7139, #FE965C);
					border-radius: 8px;
				}
				&:last-child{
					background: linear-gradient(0deg, #396BF9, #769BFE);
					border-radius: 8px;
				}
			}
			image{
				width: 36rpx;
				margin-right: 18rpx;
			}
		}
	}
</style>
